<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        用户名：<input type="text" v-model="username"> <span style="color: #f00">{{ msg }}</span>
    </div>
</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">

    new Vue({
        el: '#app',
        data: {
            username: '',
            msg: '', // 1. 用户输入的内容小于3位 2. 用户输入的信息超过10位
        },
        /*watch 查看 监视的意思 */
        watch: {
            username(newVal, oldVal) {
                console.log(newVal, oldVal);
                if (newVal.length < 3) {
                    this.msg = '*用户输入的内容不能少于3位';
                    return;
                }
                if (newVal.length > 10) {
                    this.msg = '*用户输入的内容不能多于10位';
                    return;
                }
                this.msg = '';
                console.log(this.username, '输入合法');

            }
        }
    })
</script>

</html>
